<template>
	<view class="main">
		<u-navbar title="团体认证" :autoBack="true" :placeholder="true" :titleStyle="state.titleStyle" :height="40"
			bgColor="#F5F5F5">
		</u-navbar>
		<view class="teamCenter">
			<view class='dui'>
				<text>认证方式</text>
				<view class="inRight">
					<view class="imgen" @click="getQie(1)">
						<image :src="state.renCode==1?'../../static/icon_select2@2x.png':'../../static/icon_select@2x.png'" mode=""></image>
							公司认证
					</view>
					<view class="imgen" @click="getQie(2)">
						<image :src="state.renCode==2?'../../static/icon_select2@2x.png':'../../static/icon_select@2x.png'" mode=""></image>
							无公司认证
					</view>
				</view>
				<!-- <input type="text" placeholder="请输入兑换码" v-model="duiId"> -->
			</view>
			<view class='dui' v-if="state.renCode=='1'">
				<text>公司名称</text>
				<input type="text" placeholder="请输入公司名称" v-model="state.company">
			</view>
			<view class='dui'>
				<text>联系人</text>
				<input type="text" placeholder="请输入联系人" v-model="state.name">
			</view>
			<view class='dui'>
				<text>联系电话</text>
				<input type="text" placeholder="请输入联系电话" v-model="state.mobile">
			</view>
			<view class='dui' @click="state.show=true" v-if="state.userInfo.authentication!=3">
				<text>认证城市</text>
				<view class="rights" >
					<view v-if="state.area!=''">{{state.area}}</view>
					<image src="../../static/me_shezhi_icon_more@2x.png" mode=""></image>
				</view>
			</view>
			<view class='dui' v-else>
				<text>认证城市</text>
				<view class="rights" >
					<view v-if="state.area!=''">{{state.area}}</view>
				</view>
			</view>
			<!-- <uni-data-picker :localdata="state.items" popup-title="请选择班级" @change="onchange" @nodeclick="onnodeclick"></uni-data-picker> -->
			<!-- <input type="text" placeholder="请输入兑换码" v-model="duiId"> -->
		</view>
		<view class="" v-if='state.renCode==2'>
			<view class="buc">
				上传身份证信息：
			</view>
			<view class="card">
				<image src="../../static/me_rz_icon_sfz1@2x.png" mode="" v-if="state.idcard_front_image==''" @click="chooseImages(1)"></image>
				<image :src="state.idcard_front_image" mode="" v-else></image>
				<text>身份证人像面</text>
				<image src="../../static/me_rz_icon_sfz2@2x.png" mode="" v-if="state.idcared_opposite_image==''" @click="chooseImages(2)"></image>
				<image :src="state.idcared_opposite_image" mode="" v-else></image>
				<text>身份证国徽面</text>
			</view>
		</view>
		<view class="" v-if='state.renCode==1'>
			<view class="buc">
				上传营业执照：
			</view>
			<view class="img">
				<image src="../../static/me_rz_icon_sfz1@2x.png" mode="" v-if="state.fullurl==''" @click="chooseImage"></image>
				<image :src="state.fullurl" mode="" v-else></image>
			</view>
		</view>
		<view class="baozheng">
			认证费用{{state.authentication_amount}}元
		</view>
		<view class="butLi" @click="state.juShow=true" v-if="state.userInfo.authentication!=2&&state.userInfo.authentication!=3">
		    提交认证
		</view>
		<!-- 支付-->
		<view class="tan" v-if="state.juShow">
			<view class="bgcen">
				<view class="times">
					支付保证金
				</view>
				<view class="cha" @click="state.juShow=false">
					<image src="../../static/icon.png" mode="" ></image>
				</view>
				<view class="qian">
					<text>￥</text>{{state.authentication_amount}}
				</view>
				<view class="buc">
					付款说明：
				</view>
				<view class="xuan">
					<view class="ones" v-for="(val,index) in state.juList" :key='index' @click="getXuan(val.id)">
						<view class="lezhi">
							<image :src="val.img" mode=""></image>{{val.name}}
						</view>
						<view class="dui">
							<image src="../../static/login_icon_select2@2x.png" mode="" v-if="val.id==state.juid"></image>
							<image src="../../static/icon_select@2x.png" mode="" v-else></image>
						</view>
					</view>
				</view>
				<view class="juBao" @click="zf">
					确认支付
				</view>
			</view>
		</view>
		<!-- 地图选择 -->
		<!-- <u-picker :show='state.show' :defaultIndex="[0,0,0]" @cancel="state.show=false" :columns="state.columns" @change="confirm" @confirm="isDz" keyName="name"></u-picker> -->
		<u-picker :show='state.show' :defaultIndex="[0]" @cancel="state.show=false" :columns="state.columns"
			@change="confirm" @confirm="isDz" keyName="name"></u-picker>
	</view>
</template>
<script setup>
	import {ref,reactive,} from 'vue';
	import sheep from '@/sheep';
	import {onLoad} from '@dcloudio/uni-app';
	const state = reactive({
		userInfo:{},
		renCode:1,
		juList:[
			{
				id:1,
				name:'微信支付',
				img:'../../static/pay_icon_wei@2x.png'
			},
			{
				id:2,
				name:'支付宝支付',
				img:'../../static/pay_icon_zhi@2x.png'
			}
		],
		items:[{
			id:"",
			name:'',
		}],
		juid:1,
		juShow:false,
		imagePath:[],
		preimagePath:'',
		name:'',//联系人，姓名
		company:'',//公司名称
		mobile:'',//联系电话
		fullurl:'',//上传图片地址//营业执照
		show:false,
		columns:[],
		province_id:'',//省id
		province_id:'',//省id
		city_id:'',//市id
		region_id:'',//区id
		area_id:'',
		province_name:'',//省name
		city_name:'',//市name
		address:'',//区name
		area_ids:[],
		area:'',
		idcard_front_image:'',//正面身份信息
		idcared_opposite_image:'',//反面身份信息
		id:'',
		authentication_amount:''
	});
	onLoad((options) => {
		getAddress()
		getUser()
		getConfigSet()//保证金
	});
	
	// 办证金金额
	async function getConfigSet() {
		const {
			code,
			data
		} = await sheep.$api.test.configSet({
			config: 'authentication_amount'
		})
		if (code == 1) {
			state.authentication_amount = data
		}
	}
	function getXuan(id){
		state.juid = id
	}
	// 切换
	function getQie(e) {
	    state.renCode = e
	}
	function onchange(e) {
	    const value = e.detail.value
	}
	async function getUser(){
		const {code,data} = await sheep.$api.user.userInfo({
			token:uni.getStorageSync('token'),
		})
		if (code == 1) {
			state.userInfo = data
		   if(data.authentication=='3'){
				getAuthCon()
		   }
		}
	}
	// 认证消息authCon
	async function getAuthCon(){
		const {code,data} = await sheep.$api.user.authCon({
			token:uni.getStorageSync('token'),
		})
		if (code == 1) {
			if(data.authentication==3){
				state.renCode=1
				state.company=data.con.company
				state.fullurl=data.con.document_images
			}
			if(data.authentication==2){
				state.renCode=2
				state.idcard_front_image=data.con.idcard_front_image
				state.idcared_opposite_image=data.con.idcared_opposite_image
			}
		   state.name=data.con.name
		   state.mobile=data.con.mobile
		   state.id = data.con.id
		   state.province_id = data.con.province_id
		   state.province_name = data.con.province_name
		   state.city_id = data.con.city_id
		   state.city_name = data.con.city_name
		   state.area = data.con.province_name+'-'+data.con.city_name
		}
	}
	// 支付提交认证
	function zf(){
		if(state.id==''){
			if(state.renCode == 1){
				if (state.company == "") {
				  uni.showToast({
				    title: "请输入公司名称",
				    icon: "none",
				    duration: 1000,
				  })
				  return
				}
			}
			if (state.name == "") {
			  uni.showToast({
			    title: "请输入联系人",
			    icon: "none",
			    duration: 1000,
			  })
			  return
			}
			if(state.renCode == 1){
				if (state.fullurl == "") {
				  uni.showToast({
				    title: "请上传公司营业执照",
				    icon: "none",
				    duration: 1000,
				  })
				  return
				}
			}else{
			
				if (state.idcard_front_image == "") {
				  uni.showToast({
				    title: "请上传身份证正面",
				    icon: "none",
				    duration: 1000,
				  })
				  return
				}
				if (state.idcared_opposite_image == "") {
				  uni.showToast({
				    title: "请上传身份证国徽面",
				    icon: "none",
				    duration: 1000,
				  })
				  return
				}
			}
			
			if (state.mobile == "") {
			  uni.showToast({
			    title: "请输入联系电话",
			    icon: "none",
			    duration: 1000,
			  })
			  return
			}
			if (state.province_id == ""||state.city_id==''||state.province_name==''||state.city_name=='') {
			  uni.showToast({
			    title: "请选择认证城市",
			    icon: "none",
			    duration: 1000,
			  })
			  return
			}
			getRen()
		}else{
		
			getTis()
		}
	}
	// 提交认证
	async function getRen() {
		let pay_type = ''
		let method =''
		let codes=''
		let port = uni.getSystemInfoSync().platform
		if(port=='windows'){
			method = 'web'
		}
		if(port=='devtools'||port=='mp-weixin'){
			method = 'miniapp'
		}
		
		if(port=='app'){
			method = 'app'
		}
		if(state.juid='1'){
			pay_type = 'wechat'
		}else{
			pay_type = 'alipay'
		}
		if(port=='devtools'||port=='mp-weixin'){
			uni.login({
				"provider": "weixin",
				"onlyAuthorize": true, // 微信登录仅请求授权认证
				success: function(event){
					codes = event.code
					getWei(pay_type,method,codes)
				},
				fail: function (err) {
			        // 登录授权失败  
			        // err.code是错误码
			    }
			})
		}else{
			const {code,data,msg} = await sheep.$api.user.createAuth({
				token:uni.getStorageSync('token'),
				type:2,
				name:state.name,
				document_images:state.fullurl,
				company:state.company,
				mobile:state.mobile,
				province_id:state.province_id,
				city_id:state.city_id,
				province_name:state.province_name,
				city_name:state.city_name,
				pay_type:pay_type,
				method:method,
				idcard_front_image:state.idcard_front_image,
				idcared_opposite_image:state.idcared_opposite_image,
			})
			if (code == 1) {
				
			 //   uni.showToast({
			 //   	title: '提交成功',
			 //   	icon: "none",
			 //   	mask: true,
			 //   	duration: 2000
			 //   })
				// uni.navigateBack({
				// 	delta:1
				// })
			}
		}
		
	}
	// 编辑认证提交
	async function getTis() {
		let pay_type = ''
		let method =''
		let codes=''
		let port = uni.getSystemInfoSync().platform
		if(port=='windows'){
			method = 'web'
		}
		if(port=='mp-weixin'){
			method = 'miniapp'
		}
		if(port=='devtools'){
			method = 'miniapp'
		}
		if(port=='app'){
			method = 'app'
		}
		if(state.juid='1'){
			pay_type = 'wechat'
		}else{
			pay_type = 'alipay'
		}
		const {code,data,msg} = await sheep.$api.user.cationEdit({
			token:uni.getStorageSync('token'),
			type:2,
			id:state.id,
			name:state.name,
			document_images:state.fullurl,
			company:state.company,
			mobile:state.mobile,
			province_id:state.province_id,
			city_id:state.city_id,
			province_name:state.province_name,
			city_name:state.city_name,
			pay_type:pay_type,
			method:method,
			idcard_front_image:state.idcard_front_image,
			idcared_opposite_image:state.idcared_opposite_image,
		})
		if (code == 1) {
			// 微信小程序支付
		   uni.showToast({
			title: '提交成功',
			icon: "none",
			mask: true,
			duration: 2000
		   })
		   uni.navigateBack({
				delta:1
		   })
		}
	}
	//微信小程序支付
	async function getWei(pay_type,method,codes){
		if (state.company == "") {
		  uni.showToast({
		    title: "请输入公司名称",
		    icon: "none",
		    duration: 1000,
		  })
		  return
		}
		if (state.name == "") {
		  uni.showToast({
		    title: "请输入联系人",
		    icon: "none",
		    duration: 1000,
		  })
		  return
		}
		if(state.renCode == 1){
			if (state.fullurl == "") {
			  uni.showToast({
			    title: "请上传公司营业执照",
			    icon: "none",
			    duration: 1000,
			  })
			  return
			}
		}else{
		
			if (state.idcard_front_image == "") {
			  uni.showToast({
			    title: "请上传身份证正面",
			    icon: "none",
			    duration: 1000,
			  })
			  return
			}
			if (state.idcared_opposite_image == "") {
			  uni.showToast({
			    title: "请上传身份证国徽面",
			    icon: "none",
			    duration: 1000,
			  })
			  return
			}
		}
		
		if (state.mobile == "") {
		  uni.showToast({
		    title: "请输入联系电话",
		    icon: "none",
		    duration: 1000,
		  })
		  return
		}
		if (state.province_id == ""||state.city_id==''||state.province_name==''||state.city_name=='') {
		  uni.showToast({
		    title: "请选择认证城市",
		    icon: "none",
		    duration: 1000,
		  })
		  return
		}
		const {code,data,msg} = await sheep.$api.user.createAuth({
			token:uni.getStorageSync('token'),
			code:codes,
			type:2,
			name:state.name,
			document_images:state.fullurl,
			company:state.company,
			mobile:state.mobile,
			province_id:state.province_id,
			city_id:state.city_id,
			province_name:state.province_name,
			city_name:state.city_name,
			pay_type:pay_type,
			method:method,
			idcard_front_image:state.idcard_front_image,
			idcared_opposite_image:state.idcared_opposite_image,
		})
		if (code == 1) {
			let orderInfo=data
		   uni.requestPayment({
		       provider: 'wxpay',    //支付类型-固定值
		       timeStamp:orderInfo.timeStamp, // 时间戳（单位：秒）
		       nonceStr: orderInfo.nonceStr, // 随机字符串
		       package: orderInfo.package, // 固定值
		       signType:orderInfo.signType, //固定值
		       paySign:orderInfo.paySign, //签名
		       success: function (res) {
		           console.log('success:' + JSON.stringify(res));
		           console.log("支付成功");
		       },
		       fail: function (err) {
		           console.log('fail:' + JSON.stringify(err));
		           console.log("支付失败");
		       }
		   });
		}
	}
	//获取地区
	// function isDz(e){
	// 	state.province_id=e.value[e.indexs.length-3].id
	// 	state.city_id=e.value[e.indexs.length-2].id
	// 	state.area_ids[0]=e.value[e.indexs.length-3].id
	// 	state.area_ids[1]=e.value[e.indexs.length-2].id
	// 	state.province_name = e.value[e.indexs.length-3].name
	// 	state.city_name = e.value[e.indexs.length-2].name
	// 	state.area= e.value[e.indexs.length-3].name+'-'+e.value[e.indexs.length-2].name
	// 	var itemts = state.area_ids.join(",");
		
	// 	state.area_id = itemts
	// 	state.show =false
	// }
	function isDz(e) {
		let index1 = []
		for(let key in e.indexs){
			index1.push(e.indexs[key])
		}
		uni.setStorageSync('addressId', e.value[index1.length-1].id=='1'?'2':e.value[index1.length-1].id)
		uni.setStorageSync('address', e.value[index1.length-1].name)
		state.area_id = e.value[index1.length-1].id=='1'?'2':e.value[index1.length-1].id
		state.area = e.value[index1.length-1].name
		state.show = false
		getNews() //获取推荐
		newsDatas() //获取更多信息
	}
	function confirm(val){
		let data = state.columns[val.columnIndex][val.index]
		if(data.level=='1'){
			getAddress1(2,data.id,1)
		}
		// if(data.level=='2'){
		// 	getAddress2(3,data.id,1)
		// }
		
	}
	// 省
	async function getAddress(){
		const {code,data} = await sheep.$api.zqzApi.area({
			level:1,
			pid:0
		})
		state.columns.push(data)
		getAddress1(2,data[0].id)
	}
	// 市
	async function getAddress1(level,pid,type){
		const {code,data} = await sheep.$api.zqzApi.area({
			level:level,
			pid:pid
		})
		if(type==1){
			state.columns[1]=data
		}else{
			state.columns.push(data)
		}
		
		// getAddress2(3,data[0].id,type)
	}
	// 区
	async function getAddress2(level,pid,type){
		const {code,data} = await sheep.$api.zqzApi.area({
			level:level,
			pid:pid
		})
		if(type==1){
			state.columns[2]=data
		}else{
			state.columns.push(data)
		}
	}
	// 上传图片
	function chooseImage(){
		uni.chooseImage({
		    count:1, //默认9
		    sizeType: ["compressed"], //可以指定是原图还是压缩图，默认二者都有
		    sourceType: ["album", "camera"], //从相册选择
		    success: (res) => {
				// state.imagePath = res.tempFilePaths[0]	
				// state.preimagePath = res.tempFilePaths
		        uni.uploadFile({
		            url:'https://laiyu.1122334455.cn/api/common/upload', 
		            filePath: res.tempFilePaths[0],
		            name:'file',   
		            formData: {
		                token: uni.getStorageSync('token')
		            },
		            success:(res) => {
		        		var data = JSON.parse(res.data)
		        		if(data.code == 1){
		        			state.fullurl=data.data.fullurl
		        		}
		            },
		            fail: (err) => {
		                console.log('uploadImage fail', err);
		            }
		        });
		    },
		});
	}
	// 上传图片
	function chooseImages(type){
		uni.chooseImage({
		    count:1, //默认9
		    sizeType: ["compressed"], //可以指定是原图还是压缩图，默认二者都有
		    sourceType: ["album", "camera"], //从相册选择
		    success: (res) => {
				// state.imagePath = res.tempFilePaths[0]	
				// state.preimagePath = res.tempFilePaths
		        uni.uploadFile({
		            url:'https://laiyu.1122334455.cn/api/common/upload', 
		            filePath: res.tempFilePaths[0],
		            name:'file',   
		            formData: {
		                token: uni.getStorageSync('token')
		            },
		            success:(res) => {
		        		var data = JSON.parse(res.data)
		        		if(data.code == 1){
							if(type=='1'){
								state.idcard_front_image=data.data.fullurl
							}else{
								state.idcared_opposite_image=data.data.fullurl
							}
		        		}
		            },
		            fail: (err) => {
		                console.log('uploadImage fail', err);
		            }
		        });
		    },
		});
	}
	
	function getLeft(){
		uni.navigateBack({
			delta:1,//返回层数，2则上上页
		})
	}
</script>
<style  lang="scss">
	.baozheng{
		width: calc(100% - 64rpx);
		margin: 0 auto;
		line-height:50rpx;
		color:#999;
		font-size: 30rpx;
	}
	.card {
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 0 48rpx 0;
	
		image {
			height: 280rpx;
			width: 440rpx;
			margin: 48rpx auto 24rpx;
		}
	
		text {
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
		}
	}
	.tan{
		width:100%;
		height:100vh;
		position: fixed;
	    top:0;
		left:0;
		background: rgba(0,0,0,0.4);
		.bgcen{
			width: 100%;
			height: 700rpx;
			background: #fff;
			position:absolute;
			bottom:0;
			border-radius: 16rpx 16rpx 0 0;
			// position: relative;
			.qian{
				width: 100%;
				margin: 50rpx auto;
				text-align: center;
				font-size:48rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
				text{
					font-size: 28rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
				}
			}
			.xuan{
				width:calc(100% - 64rpx);
				margin: 20rpx auto;
				overflow:hidden;
			    
				.ones{
					width: 100%;
					line-height:80rpx;
					text-align:center;
					border-radius: 12rpx;
					margin: 20rpx 0;
					display:flex;
					align-items: center;
					justify-content:space-between;
					.lezhi{
						display:flex;
						align-items: center;
						image{
							 width: 48rpx;
							 height:48rpx;
							 margin-right:10rpx;
						}
					 }
					image{
						 width: 48rpx;
						 height:48rpx;
					}
				}
				.onesmo{
					width: 100%;
					line-height:80rpx;
					text-align:center;
					border-radius: 12rpx;
					margin: 20rpx 0;
				}
			}
			.buc{
				width:calc(100% - 64rpx);
				margin: 20rpx auto;
				font-size: 28rpx;
				color: #999999;
			}
			
			.juBao{
				width:calc(100% - 64rpx);
				margin:50rpx auto;
				background: #1BDDD0;
				color:#fff;
				border-radius: 54rpx;
				line-height: 92rpx;
				text-align: center;
			}
			.times{
				text-align: center;
				width: 100%;
				font-size: 38rpx;
				line-height: 80rpx;
				font-weight: bold;
				border-bottom: 1px solid #EFEFEF;
			}
			.cha{
				position: absolute;
				top:20rpx;
				right:20rpx;
				image{
					width: 40rpx;
					height:40rpx;
				}
			}
		}
	}
	page {
		height: 100%;
		width: 100%;
		background-color: #F5F5F5;
		.main {
			height: 100%;
			width: 100%;
			background-color: #F5F5F5;
		}
		.img{
		    width:calc(100% - 48rpx);
		    padding:24rpx;
		    background: #fff;
			margin: 20rpx 0; 
			text-align: center;
			image{
				width: 440rpx;
				height:280rpx;
				// text-align: right;
			}
		}
		.teamCenter{
			width:100%;
			margin: 24rpx auto;
			.dui{
			    width:calc(100% - 48rpx);
			    padding:0 24rpx;
				line-height: 102rpx ;
			    background: #fff;
				// margin: 20rpx 0; 
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				justify-content: space-between;
				border-bottom:1px solid #F5F5F5;
				.rights{
					width: 80%;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					image {
						height: 32rpx;
						width: 32rpx;
						margin-left: 8rpx;
					}
				}
				
				input{
					text-align: right;
				}
				.inRight{
					display: flex;
					align-items: center;
					justify-content: space-between;
					line-height:48rpx;
					.imgen{
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-left:20rpx;
						image{
							width: 48rpx;
							height:48rpx;
							// display: block;
							// margin-top: 20rpx;
						}
					}
					
				}
			}
		}
		.butLi{
			width: calc(100% - 64rpx);
			// margin:60rpx auto 0;
			position: fixed;
			bottom:40rpx;
			left:32rpx;
			background: #1BDDD0;
			font-size:32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 92rpx;
			text-align: center;
			border-radius: 54rpx;
		}
		.buc{
			width:calc(100% - 64rpx);
			margin: 20rpx auto;
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.duiHuan{
			width: calc(100% - 64rpx);
			margin:2 0rpx auto;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #666666;
			line-height: 50rpx;
		}
   }
   
</style>
